<template>
  <view class="account-box">
    <view class="head_content">
      <CustomNavbar title="Account cancellation" bg="white" color="#000"></CustomNavbar>
    </view>
    <view class="account-tip">
      <uni-icons type="info" size="28" color="#FF8F00" class="uni-icon"></uni-icons>
      Please verify that the phone number {{ user.mobile | fnPhone }} has been bound first
    </view>
    <view class="account-form">
      <view class="item">
        <!-- <view class="label">SMS Code</view> -->
        <view class="input mobile">
          <country-code-selector :countryCode.sync="country"></country-code-selector>
          <u-input v-model="code" type="number" class="codeInput" clearable placeholder="Please enter SMS code">
            <template slot="suffix">
              <u-code
                ref="uCode"
                uniqueKey="login-code"
                @change="codeChange"
                :seconds="60"
                start-text="SMS Code"
                end-text="Reacquire"
                change-text="After xs"
              ></u-code>
              <u-button class="codebtn" @tap="getCode">{{ login.codeTips }}</u-button>
            </template>
          </u-input>
        </view>
      </view>
      <u-button
        type="primary"
        @click="codeLogin"
        class="square-btn"
        shape="square"
        style="margin-top: 50%"
        >
        confirm
        </u-button
      >
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import countryCodeSelector from '../../../components/vue-country-code-selector/index.vue'
export default {
  components: {
    countryCodeSelector,
  },
  data() {
    return {
      code: '',
      country:'',
      login: {
        codeTips: 'SMS code'
      },
      user: { mobile: '' }
    }
  },
  computed: { ...mapGetters('user') },
  onLoad() {
    this.getPageData()
  },
  filters: {
    fnPhone: function (value) {
      return value.substr(0, 3) + '****' + value.substr(value.length - 4)
    }
  },
  methods: {
    ...mapActions('user', ['getUserInfo']),
    // 获取页面数据
    getPageData() {
      this.getUserInfo().then((res) => {
        // if(res.code === 1) {
        res.data.avatar = 'https://91xft-static.oss-cn-hangzhou.aliyuncs.com/xft-cli/mrtx/1.png'
        this.user.avatar = res.data.avatar
        this.user.nickname = res.data.nickname
        this.user.mobile = res.data.phone
        // }
      })
    },
    // 2.验证码登录
    codeLogin() {
      console.log('code', this.code);
      this.$request('login.logoff', this.code).then((res) => {
        this.$u.toast('登录成功')
        // this.getUserInfo(res.data.token)
        this.redirectPath()
      })
    },
    redirectPath() {
      // const page = getCurrentPages()[0]
      // if (page.route.indexOf('pages/login/login') == -1) {
      //   uni.navigateBack()
      // } else {
      //   }
        uni.switchTab({ url: '/pages/home/user' })
    },
    // 验证码倒计时
    codeChange(text) {
      this.login.codeTips = text
    },
    // 获取验证码
    getCode() {
      if (!this.user.mobile) {
        this.$u.toast('Please enter phone number！')
        return
      }

      let obj = {
        phone: this.user.mobile,
        country: this.country
      }
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({ title: 'Getting verification code！' })
        this.$request('login.sendCode', obj, false)
          .then((res) => {
            // if(res.code === 1) {
            // } else {
            // 	uni.hideLoading()
            // }

            uni.hideLoading()
            uni.$u.toast('Verification code sent！')
            this.$refs.uCode.start()
          })
          .catch((err) => {
            uni.hideLoading()
            uni.$u.toast('Failed to send verification code！')
          })
      } else {
        uni.$u.toast('Send after countdown ends！')
      }
    }
  }
}
</script>

<style>
.codeInput .u-input__content__field-wrapper__field{
  color: #303133 !important;
}
</style>
<style lang="scss" scoped>
.input.mobile {
      color: #333333;
      display: flex;
      align-items: center;
    }
.account-box {
  min-height: 100vh;
  background-color: white;
  .account-tip {
    width: 100%;
    height: 80rpx;
    background: #fff9f1;
    display: flex;
    // align-items: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #fd9501;
    line-height: 49rpx;
    // text-align: justify;
    font-style: normal;
    padding-left: 30rpx;
    .uni-icon {
      color: #ff8f00;
      margin-right: 20rpx;
    }
  }
  .account-form {
    padding: 0 30rpx;
    .item {
      height: 128rpx;
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #e7e7e7;
      .label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
        text-align: left;
        font-style: normal;
        flex: 0 0 176rpx;
        border-right: 2rpx solid #dadada;
      }
      .input {
        width: 100%;
        ::v-deep .u-input {
          height: 100rpx;
          // background: #F7F8F9;
          border-radius: 0;
          border: none;
          padding: 12rpx 24rpx 12rpx 12rpx !important;
          color: #303133 !important;
          // border-bottom: 1px solid rgba(255, 255, 255,0.1) !important;
          .u-input__content__field-wrapper__field{
            color: #303133 !important;
          }
        }

        .codebtn {
          // padding-left: 40rpx;
          // padding-right: 40rpx;
          // font-size: 28rpx;
          // color: #333;
          height: 60rpx;
          min-width: 165rpx;
          border-radius: 28rpx;
          border: 1px solid #f56c6c;
          background-color: #f56c6c;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .square-btn {
    width: 650rpx;
    height: 88rpx;
    background: #f56c6c;
    border-color: #f56c6c;
    border-radius: 50rpx;
    margin: 0 auto;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #ffffff;
    line-height: 48rpx;
    text-align: justify;
    font-style: normal;
  }
}
</style>
